import style from './link.less'
import '../icons/loading.js'

class AnLink extends HTMLElement {
    #el = null
    static get observedAttributes() {
        return [
            'type',
            'size',
            'loading',
            'disabled',
        ]
    }
    constructor() {
        super()
        const root = this.attachShadow({ mode: 'open' })
        root.innerHTML = `<style>${style}</style>
        <a class="an-link">
            <slot></slot>
        </a>`
        this.#el = root.querySelector('.an-link')
    }

    connectedCallback() {
        AnLink.observedAttributes.forEach(name => {
            this.updateProp(name)
        })
    }

    attributeChangedCallback(name, oldValue, newValue) {
        this.updateProp(name, oldValue, newValue)
    }

    isValue(val) {
        return val === '' || val === 'true'
    }

    /**
     * 更新属性
     * @param {string} name 
     * @param {string} oldValue 
     * @param {string} newValue 
     */
    updateProp(name/* , oldValue, newValue */) {
        const setVal = () => {
            const val = this[name]
            if (this.isValue(val, name)) {
                this.#el.dataset[name] = true
            } else {
                delete this.#el.dataset[name]
            }
        }
        switch (name) {
            case 'type':
            case 'size':
                if (this[name]) {
                    this.#el.dataset[name] = this[name]
                } else {
                    delete this.#el.dataset[name]
                }
                break
            case 'disabled':
                setVal()
                break
            case 'loading':
                setVal()
                this.updateLoading()
                break
            default:
                break
        }
    }

    updateLoading() {
        if (this.isValue(this.loading, 'loading')) {
            let el = this.#el.querySelector('an-icon-loading')
            if (!el) {
                el = document.createElement('an-icon-loading')
                const referenceNode = this.#el.children[0]
                this.#el.insertBefore(el, referenceNode)
            }
        } else {
            const el = this.#el.querySelector('an-icon-loading')
            if (el) {
                this.#el.removeChild(el)
            }
        }
    }

    set type(value) { this.setAttribute('type', value) }
    get type() { return this.getAttribute('type') }

    set size(value) { this.setAttribute('size', value) }
    get size() { return this.getAttribute('size') }

    set round(value) { this.setAttribute('round', value) }
    get round() { return this.getAttribute('round') }

    set block(value) { this.setAttribute('block', value) }
    get block() { return this.getAttribute('block') }

    set loading(value) { this.setAttribute('loading', value) }
    get loading() { return this.getAttribute('loading') }

    set disabled(value) { this.setAttribute('disabled', value) }
    get disabled() { return this.getAttribute('disabled') }

    set nativeType(value) { this.setAttribute('native-type', value) }
    get nativeType() { return this.getAttribute('native-type') }

}

if (!customElements.get('an-link')) {
    customElements.define('an-link', AnLink)
}